<template>
  <div class="floating-sidebar">
    <div class="sidebar-item" :class="{ active: $route.path === '/home' }" @click="goToHome">
      <el-icon><HomeFilled /></el-icon>
    </div>
    <div class="sidebar-item" :class="{ active: $route.path === '/search' }" @click="goToSearch">
      <el-icon><Search /></el-icon>
    </div>
    <div class="sidebar-item" :class="{ active: $route.path === '/favorites' }" @click="goToFavorites">
      <el-icon><Star /></el-icon>
    </div>
    <div class="sidebar-item" :class="{ active: $route.path === '/history' }" @click="goToHistory">
      <el-icon><Clock /></el-icon>
    </div>
    <div class="sidebar-item" :class="{ active: $route.path === '/cart' }" @click="goToCart">
      <el-icon><ShoppingCart /></el-icon>
    </div>
    <div class="sidebar-item divider"></div>
    <div class="sidebar-item" @click="toggleDarkMode">
      <el-icon>
        <component :is="darkModeIcon" />
      </el-icon>
    </div>
    <div class="sidebar-item" @click="goToSettings">
      <el-icon><Setting /></el-icon>
    </div>
  </div>
  <!-- Refresh/Back to top button -->
  <div class="refresh-button" @click="handleRefreshOrBackToTop">
    <el-icon>
      <component :is="scrollPosition > 50 ? 'ArrowUp' : 'Refresh'" />
    </el-icon>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { HomeFilled, Search, Star, Clock, ShoppingCart, Setting, Refresh, Sunny, Moon, ArrowUp } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/stores/token.js'
import useUserInfoStore from '@/stores/userInfo.js'

const router = useRouter()
const tokenStore = useTokenStore()
const userInfoStore = useUserInfoStore()
const isDarkMode = ref(false)
const scrollPosition = ref(0)
const darkModeIcon = computed(() => (isDarkMode.value ? Moon : Sunny))

// 计算属性：判断用户是否登录
const isLoggedIn = computed(() => !!tokenStore.token && !!userInfoStore.info.nickName)

const handleScroll = () => {
  scrollPosition.value = window.scrollY
}

const handleRefreshOrBackToTop = () => {
  if (scrollPosition.value > 50) {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  }
  window.location.reload()
}
// 监听滚动事件
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})
// 卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
// 切换暗黑模式
const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value
  document.documentElement.classList.toggle('dark', isDarkMode.value)
  console.log('暗黑模式切换:', isDarkMode.value ? 'on' : 'off')
}
// 跳转到设置页面
const goToSettings = () => {
  router.push('/home/settings')
}
// 通用导航函数：需要登录的页面
const navigateToProtectedPage = (path) => {
  if (isLoggedIn.value) {
    router.push(path)
  } else {
    router.push('/login')
  }
}
// 跳转到首页
const goToHome = () => {
  router.push('/home')
}
// 跳转到搜索页面
const goToSearch = () => {
  router.push('/home/search')
}
// 跳转到收藏页面
const goToFavorites = () => {
  if (!isLoggedIn.value) {
    router.push('/login')
    return
  }
  navigateToProtectedPage('/home/favorites')
}
// 跳转到历史页面
const goToHistory = () => {
  if (!isLoggedIn.value) {
    router.push('/login')
    return
  }
  navigateToProtectedPage('/home/history')
}
// 跳转到购物车页面
const goToCart = () => {
  if (!isLoggedIn.value) {
    router.push('/login')
    return
  }
  navigateToProtectedPage('/home/cart')
}
</script>

<style scoped>
.floating-sidebar {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
}

.sidebar-item {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 0;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
  color: #606266;
  font-size: 20px;
}

.sidebar-item:hover {
  background-color: #f0f2f5;
}

.sidebar-item.active {
  background-color: #409EFF;
  color: #fff;
}

.sidebar-item.active:hover {
  background-color: #409EFF;
}

.divider {
  width: 30px;
  height: 2px;
  background-color: #dcdfe6;
  margin: 10px 0;
  border-radius: 0;
  cursor: default;
}

.divider:hover {
  background-color: #dcdfe6;
}

/* Style for the independent refresh button */
.refresh-button {
  position: fixed;
  right: 20px;
  top: calc(50% + 210px);
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  color: #606266;
  font-size: 20px;
  z-index: 100;
}

.refresh-button:hover {
  background-color: #f0f2f5;
  transform: scale(1.1);
}

/* 暗黑模式样式 */
:root.dark {
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #ffffff;
}

:root.dark .floating-sidebar,
:root.dark .refresh-button {
  background-color: #2b2b2b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

:root.dark .sidebar-item {
  color: #909399;
}

:root.dark .sidebar-item:hover {
  background-color: #3a3a3a;
}

:root.dark .divider {
  background-color: #4a4a4a;
}
</style> 